<template>
  <div>
    <header-nav :navItem="navItem" @currentInfo="currentInfo"></header-nav>
    <keep-alive>
      <transition name="translateXFadeIn" mode="out-in">
      <component :is="currentComponent"></component>

      </transition>
    </keep-alive>
  </div>
</template>

<script>
  import headerNav from "./headerNav.vue"
  import bodyHistory from "./bodyHistory/bodyHistory.vue"
  import bodyCollect from "./bodyCollect/bodyCollect.vue"
  import bodyInfomation from "./bodyInfomation/bodyInfomation.vue"
  import bodyProduct from "./bodyProduct/bodyProduct.vue"
  export default {
    components: {
      headerNav,
      bodyHistory,
      bodyCollect,
      bodyInfomation,
      bodyProduct,
    },
    data() {
      return {
        currentItemPath: "history",
        navItem: [{
            name: "点赞历史",
            path: "history",
            icon:"iconfont iconlishi"
          },
          {
            name: "个人收藏",
            path: "collect",
            icon:"iconfont iconshoucang"
          },
          {
            name: "我的痕迹",
            path: "product",
            icon:"iconfont iconchakanhenji"
          },
          {
            name: "个人信息",
            path: "information",
            icon:"iconfont icongerenxinxi1"
          }
        ]
      }
    },
    computed: {
      currentComponent() {
        switch (this.currentItemPath) {
          case 'history':
            return bodyHistory;
          case "collect":
            return bodyCollect;
          case "product":
            return bodyProduct;
          case "information":
            return bodyInfomation;
          default:
            return bodyHistory;
        }
      }
    },
    methods: {
      currentInfo(item) {
        this.currentItemPath = item.path
      }
    }
  }
</script>

<style>
@import url("../../css/comment/animate.css");

</style>